<template>
  <div style="overflow: auto; height: 100%">
    <a-card style="width: 100%">
      <!-- 搜索 -->
      <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
        style="margin: 30px 0; background: #fff" expandFixed="true">
        <a-form-item name="price" label="请输入标题">
          <a-input v-model:value="values.text" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item name="area" label="状态">
          <a-select v-model:value="values.creas">
            <a-select-option v-for="(item, ind) in zt" :key="ind" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="areas" label="分类">
          <a-select v-model:value="values.breas">
            <a-select-option v-for="(item, ind) in category" :key="ind" :value="item.id">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item expandFixed="right">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="() => toset()">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <br />
    <a-card style="width: 100%">
      <a-space v-if="state.selectedRowKeys.length != 0">
        <a-button @click="() => publishall()">发布</a-button>
        <a-button @click="() => draftall()">草稿</a-button>
        <a-button @click="() => allrecom(true)">首焦推荐</a-button>
        <a-button @click="() => allrecom(false)">撤销首焦</a-button>
        <a-button type="dashede" danger @click="()=>removeAll()">删除</a-button>
      </a-space>
      <a-table :dataSource="imgs" :columns="columns" style="width: 100%; height: 100%" :scroll="{ x: 1300 }"
        :pagination="false" :row-selection="{ onChange: onSelectChange }">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'address'">
            <div class="edits">
              <a-button @click="()=>toatredit(record)">编辑</a-button>
              <a-button @click="() => SetRecommended(record)">{{
                record.isRecommended ? '撤销首焦' : '首焦推荐'
              }}</a-button>
              <a-button>查看访问</a-button>
              <a-button @click="()=>toremove(record)">删除</a-button>
            </div>
          </template>
          <template v-if="column.key === 'tags'">
            <a-tag v-for="item in record.tags" :key="item.id">{{ item.label }}</a-tag>
          </template>
          <template v-if="column.key === 'category'">
            <a-tag v-if="record.category">{{ record.category.label }}</a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-badge :status="record.status == 'publish' ? 'success' : 'warning'" />
            {{ record.status == "publish" ? "已发布" : "草稿" }}
          </template>
        </template>
      </a-table>
    </a-card>
    <a-card style="width: 100%">
      <a-pagination v-model:current="current" v-model:page-size="pageSize" :total="total"
        :page-size-options="pageSizeOptions" show-size-changer @showSizeChange="onShowSizeChange"
        @change="handleTableChange" />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useHome } from "../../store/home";
import { onMounted, reactive, ref } from "vue";
import type { TableColumnsType } from "ant-design-vue";
import {useRouter} from "vue-router"
//引入pinia
const homes = useHome();
const { imgs, category, total } = storeToRefs(homes);
// 初始化搜索数据
localStorage.removeItem("searchobj")
//定义开关
let flag = false;
//定义分页数据
let current = ref(1), pageSize = ref(12);
const pageSizeOptions = ref<string[]>(['8', '12', '16', '20', '24']);

const values = reactive({
  text: "",
  creas: "",
  breas: "",
});
homes.getImages(1, 12);
homes.getcategory();

const SetRecommended = (val: any) => {
  // console.log(val)
  let obj = {
    id: val.id,
    isRecommended: !val.isRecommended
  }
  homes.setRecom(obj)
}
//多选首焦状态
const allrecom = (val: any) => {
  homes.setallrecom(state.selectedRowKeys, val)
}
const publishall = () => {
  homes.pageallpublish(state.selectedRowKeys)
}
const draftall = () => {
  homes.pagealldraft(state.selectedRowKeys)
}
//删除单个
const toremove = (val: any) => {
  // console.log(val.id, "id")
  homes.removepage(val.id)
}
//删除多个
const removeAll = () =>{
  homes.pageallremove(state.selectedRowKeys)
}
//点击搜索数据
const onFinish = () => {

  flag = true;
  searchaa()

};
//重置
const toset = () => {
  location.reload()
}

//封装一个模糊搜索的方法
let searchaa = () => {
  let obj = JSON.parse(localStorage.getItem("searchobj") || '{}');

  if (flag) {
    obj = {
      page: 1,
      pageSize: 12
    }
  } else {
    obj = {
      ...obj,
      page: current.value,
      pageSize: pageSize.value
    }
  }
  if (values.text != "") {
    obj = { ...obj, title: values.text }
  }
  if (values.creas != "") {
    obj = { ...obj, status: values.creas }
  }
  if (values.breas != "") {
    obj = { ...obj, category: values.breas }
  }

  localStorage.setItem("searchobj", JSON.stringify(obj))
  homes.getSearchs(obj)

}
//多选
type Key = string | number;
const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const onSelectChange = (selectedRowKeys: Key[]) => {
  // console.log('selectedRowKeys changed: ', selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

// 表格分页change事件
const handleTableChange = (page: number, pageSizes: number) => {
  // console.log(page,pageSize,"val")
  current.value = page
  pageSize.value = pageSizes
  //点击分页 切换分页 请求数据
  flag = false;
  searchaa()
}
const onShowSizeChange = (currents: number, pageSizes: number) => {
  console.log(currents, pageSizes, "页码，条数");
  current.value = 1
  pageSize.value = pageSizes;
};


let zt = [
  { label: "已发布", value: "publish" },
  { label: "草稿", value: "draft" },
];
const columns = [
  {
    title: "标题",
    dataIndex: "title",
    key: "title",
    width: 100,
    fixed: "left",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: 100,
  },
  {
    title: "分类",
    dataIndex: "category",
    key: "category",
    width: 100,
  },
  {
    title: "标签",
    dataIndex: "tags",
    key: "tags",
    width: 100,
  },
  {
    title: "阅读量",
    dataIndex: "views",
    key: "views",
    width: 100,
  },
  {
    title: "喜欢数",
    dataIndex: "likes",
    key: "likes",
    width: 100,
  },
  {
    title: "发布时间",
    dataIndex: "createAt",
    key: "createAt",
    width: 100,
  },
  {
    title: "编辑",
    dataIndex: "address",
    key: "address",
    width: 300,
    fixed: "right",
  },
];



let router = useRouter()

//点击去编辑页
const toatredit = (val:any) =>{
  router.push("/artedit/" + val.id)
}
</script>

<style lang="scss">
.edits {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-shrink: 0;
}
</style>